<template>
  <div id="app">
    <div class="boxz">
    <main class="mo">
          <!-- <h4 @click="tan">首页</h4>
          <el-col class="zu" :span="12"> -->
   
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#324057"
      text-color="#fff"
      active-text-color="#ffd04b">

        <!-- <el-menu-item index="0" @click="chuan" data-path="home">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item> -->
      <el-submenu index="0" @click="chuan" data-path="home">
        <template slot="title" >
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </template>
       
       
      </el-submenu>
      <!-- <el-menu-item index="manage" ><i class="el-icon-menu" id="home"></i>首页</el-menu-item> -->
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-tickets"></i>
          <span slot="title">数据管理</span>
        </template>
        <el-menu-item-group >
          <!-- <template slot="title">分组一</template> -->
          
          <el-menu-item @click="chuan" data-path='userList' index="1-1">用户列表</el-menu-item>
          <el-menu-item @click="chuan" data-path="shopList" index="1-2">商铺信息</el-menu-item>
           <el-menu-item @click="chuan" data-path="foodList" index="1-3">食品列表</el-menu-item>
           <el-menu-item @click="chuan" data-path="dDList" index="1-4">订单列表</el-menu-item>
           <el-menu-item @click="chuan" data-path="admin" index="1-5">管理员列表</el-menu-item>
        </el-menu-item-group>
       
      </el-submenu>
      <el-submenu  index="2">
        <template slot="title">
          <i class="el-icon-plus"></i>
          <span slot="title">添加数据</span>
        </template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item   @click="chuan" data-path="addShop" index="2-1" >更新商铺</el-menu-item>
          <el-menu-item @click="chuan" data-path="addFood" index="2-2">添加食品</el-menu-item>
        </el-menu-item-group>
       
      </el-submenu>
       <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-picture-outline"></i>
          <span slot="title">图表</span>
        </template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item @click="chuan" data-path="userFenbu" index="3-1">用户分布</el-menu-item>
        </el-menu-item-group>
       
      </el-submenu>
     
       <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span slot="title">设置</span>
        </template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item @click="chuan" data-path="userSetting" index="4-1">用户设置</el-menu-item>
        </el-menu-item-group>
       
      </el-submenu>
      
    </el-menu>
  <!-- </el-col> -->
      </main>
    </div>
     <section>
         <router-view v-if="isRouterAlive"/>
     </section>
    
  </div>
</template>
<script>
export default {
  provide(){
     return {
       reload:this.reload
     }
  },
    data(){
      return{
        isRouterAlive:true,
        array:["数据管理","添加数据","图表","设置"],
        index:0,
      }
    },
    methods: {
      reload(){
         this.isRouterAlive=false
         this.$nextTick(function(){
           this.isRouterAlive=true
         })
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
        this.index=key;
        if(key=='0'){
          this.$router.push('/home')
        }
        // console.log(this.index)
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
         if(key=='0'){
          this.$router.push('/home')
        }
      },
      chuan(e){
        // console.log(this.$refs.can.$el.innerText)
        // console.log("/"+this.array[this.index-1]+"/"+e.$el.innerText)
        // console.log(e.$el.parentElement.parentElement)
        if(e.$el.innerText=="首页"){
          var obj={
            name:"首页"
          }
        }else{
           var obj={
          home:"首页",
          name:this.array[this.index-1],
          title:e.$el.innerText
        }
        }
        
        this.$store.commit("setCan",obj);
        // console.log(e.$el.dataset.path)
        this.$router.push(`/${e.$el.dataset.path}`);
        
      },
      tan(e){
        console.log(e.target)
      }
    },
    
    components:{
      
    }
  }

</script>

<style lang="less">
html{
  scroll-behavior: smooth;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  display: flex;
  z-index: 50;
   
}
@font-face {
  font-family: 'iconfont';  /* Project id 2408325 */
  src: url('//at.alicdn.com/t/font_2408325_ldiu455skv.woff2?t=1620383141809') format('woff2'),
       url('//at.alicdn.com/t/font_2408325_ldiu455skv.woff?t=1620383141809') format('woff'),
       url('//at.alicdn.com/t/font_2408325_ldiu455skv.ttf?t=1620383141809') format('truetype');
}

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
// #app>section{
//   width: 85vw;
  
// }
.boxz{
  width: 15vw;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.boxz h4{
    color: #d6d8dd;
    display: block;
    text-align: left;
    margin-left: 28px;
}

.mo .el-menu-item{
  width: 100% !important;
  padding: 0 2.5vw !important;
  min-width: 0 !important;
  text-align: left !important;

}
.boxz main{
    width: 15vw;
    height:96vh;
    padding: 2vh 0;
    background-color: #324057;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
}
main li{
  width: 100%;
}

.zu{
  width: 100% !important;
}
// .boxz >>> li{
//   width: 100%;
// }
.boxz li{
    text-align: left;
}
h1,h2,h3,h4,h5,h6,p,a,li,i,aside{
  cursor: pointer;
}
*{
  padding: 0;
  margin: 0;
}
li{
  list-style: none;

}

</style>
